<template>
  <by-dialog :model-value="modelValue" diy @close="close">
    <template #content>
      <view class="flex-column flex-center relative">
        <image src="/static/discount.png" class="discount block" />
        <view class="draw-down flex-row flex-center" @click="handleClick">
          <text>{{ home ? '立 即 领 取' : '马 上 使 用' }}</text>
        </view>

        <view class="flex-row flex-center close-box margin-top-20 padding-20" @click="close">
          <image src="/static/close2.png" class="close" />
        </view>
      </view>
    </template>
  </by-dialog>

  <by-service :type="1" is-ios v-model="showService" />
</template>

<script setup lang="ts">
import { drawDownCoupon } from '@/common/api'
import { handleToPay, toast } from '@/common/util'

interface IProps{
  modelValue: boolean
  home: boolean
}

const props = withDefaults(defineProps<IProps>(), {
  modelValue: false,
  home: false
})

const $emit = defineEmits(['update:modelValue', 'close', 'useCoupon'])

function close() {
  handleClose()
}

function handleClose() {
  $emit('update:modelValue', false)
  $emit('close')
}

function handleClick() {
  props.home ? drawDown() : useCoupon()
}

async function drawDown() {
/*  uni.requestSubscribeMessage({
    tmplIds: ['7kekuH669ltpDeoiXwhw3_fSLt4skgv-GJiZ0LkQz5k']
  })*/
  try {
    await drawDownCoupon()
    toast('领取成功')
    handleClose()
  } catch (e) {
    handleClose()
  }
}

const showService = ref(false)
async function handlePay() {
  const res = await handleToPay()
  if (res) {
    showService.value = true
    handleClose()
  }
}

function useCoupon() {
  $emit('useCoupon')
  handleClose()
}
</script>

<style scoped lang="scss">
.discount{
  width: 656rpx;
  height: 518rpx;
}

.draw-down{
  @include position(absolute, $bottom: 130rpx, $left: 236rpx);
  width: 298rpx;
  height: 78rpx;
  border-radius: 40rpx;
  background: linear-gradient(-16deg, rgba(255,145,78), rgba(255,193,119));
  box-shadow: 0 9rpx 38rpx 0 rgba(122,39,26,0.28);
  font-size: 40rpx;
  color: $color-white;
}

.close-box{
  border: 2rpx solid #ffffff;
  border-radius: 50%;

  .close{
    width: 30rpx;
    height: 30rpx;
  }

}
</style>
